<template>
  <div>
    <div class="warp">
			<div class="main_l">
				<div class="banner">
					<div class="flexslider">
						<ul class="slides" style=" background-image: url(@/assets/img/banner-1.jpg); background-repeat: no-repeat;">
							<li class="on">
								<img src="../assets/img/banner-1.jpg">
							</li>
							<li>
								<img src="../assets/img/banner-2.gif">
							</li>
							<li>
								<img src="../assets/img/banner-3.jpg">
							</li>
							<li>
								<img src="../assets/img/banner-4.gif">
							</li>
						</ul>
					</div>
					<div class="slide-r">
						<h4>关于博主</h4>
						<div v-html="detail.content"></div>
						<!-- <ul>
							<li>
								<h4>关于博主</h4>
								<div v-html="detail.content"></div>
							</li>
						</ul> -->
					</div>
				</div>
				<!--最新作品-->
				<div class="news_works">
					<h3 class="news_works_title">最新作品</h3>
					<ul class="news_works_ul">
          <li v-for="(item,index) in dataTable" :key="index">
            <figure>
              <router-link :to="'/detail??table=works&title=个人作品&&id='+item._id"> <img src="@/assets/img//person_1.jpg" /></router-link>
            </figure>
            <div class="news_work_txt">
              <h4 class="news_work_txt_name">{{item.title}}</h4>
              <div class="news_work_txt_p" v-html="item.content">
              </div>
              <router-link :to="'/detail??table=works&title=个人作品&&id='+item._id" class="news_work_txt_link">详情</router-link>
              <p>
                <span class="classic">个人作品</span>
                <span class="time">{{parseTime(item.create_time)}} </span>
              </p>
            </div>
          </li>
        </ul>
				</div>
			</div>
      <!-- 首页右边 -->
      <div class="main_r">
				<h3>关注我</h3>
				<ul class="focuse">
					<li>
						<a :href="detail.weibo" target="_blank"><img src="@/assets/img/ico_05_1.jpg"></a>
						<p>新浪微博</p>
					</li>
					<li>
						<a :href="'mailto:'+detail.email"><img src="@/assets/img/ico_07_1.jpg"></a>
						<p>邮箱</p>
					</li>
				</ul>
				<h3>最新作品</h3>
				<ul class="main_works">
					<li v-for="(item,index) in dataTable" :key="index">
						<router-link :to="'/detail??table=works&title=个人作品&&id='+item._id" class="news_work_txt_link">{{item.title}}</router-link></li>
				</ul>
			</div>
		</div>
  </div>
</template>
	<script>window.jQuery || document.write('<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"><\/script>')</script>
			<script type="text/javascript" src="@/assets/js/jquery.flexslider-min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$('.flexslider').flexslider({
						directionNav: true,
						pauseOnAction: false
					});
				});
			</script>
<script>
import newWorks from '@/components/newWorks'
import {list} from '@/api/works.js'
import {getAbout} from '@/api/about.js'
export default {
  components:{newWorks},
  data() {
    return {
			dataTable:[],
			detail:{	//关于我
				content:'' 
			}
    }
  },
  mounted(){
    this.getList()
  },
  computed:{
  },
  methods:{
		// 列表
    getList(){
      const that = this
      list().then(function(res){
        // console.log(res)
        if(res.success){
          that.dataTable = res.data
        }
      }).catch((error)=>{
        console.log(error)
      })
			getAbout().then(function(res){
        // console.log(res)
        if(res.success){
          if(res.data.length>0){
            that.detail = res.data[0]
          }
        }
      }).catch((error)=>{
        console.log(error)
      })
    },
  },
}
</script>
<style scoped>

</style>
